<script setup lang="ts">
import FormLogin from "./component/FormLogin.vue";
</script>

<template>
 <a-flex justify="center" align="center" class="admin-login">
   <a-flex class="login-admin-content">
       <div class="login-admin-left">
         <h2 class="log-admin-title">管理员更好管理用户信息</h2>
         <img src="/src/assets/image/Linter.png" alt="..." class="log-admin-img">
       </div>
       <div class="login-admin-form">
         <h2 class="form-title">Linter AI 管理端</h2>
         <form-login></form-login>
       </div>
     </a-flex>
 </a-flex>
</template>

<style scoped lang="scss">
.admin-login{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.login-admin-content{
  $width: 72rem;
  position: relative;
  width: 72rem;
  height: 32rem;
  background: #c2e5ff;
  border-radius: 10px;
  box-shadow: 0 0 10px #c2e5ff;
}
.login-admin-left{
  width: 32rem;
  height: 100%;
  margin: 0;
  box-sizing: border-box;
  background: #fff url("http://qiniuyun.linter.top/Linter/Vue_img/User/%E7%AE%A1%E7%90%86%E5%91%98%E7%99%BB%E5%BD%95.jpg") no-repeat center;
  background-size: 80% 80%;
  .log-admin-title{
    width: 100%;
    height: 2rem;
    line-height: 2rem;
    margin: 0 auto;
    text-align: center;
    font-weight: bold;
    font-size: 1.2rem;
  }
  .log-admin-img{
    position: absolute;
    left: 5rem;
    top: 3rem;
    width: 8rem;
    height: 2.4rem;
  }
}
.login-admin-form{
  margin: 0 auto;
  box-sizing: border-box;
  width: 40rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .form-title{
    text-align: center;
    font-size: 1.7rem;
  }
}
</style>